﻿<template>
  <a-card :bordered="false">
    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="hanldleAdd()" v-if="hasPerm('service.Add')">新建</a-button>
      <a-button
        v-if="hasPerm('service.Delete')"
        type="primary"
        icon="minus"
        @click="handleDelete(selectedRowKeys)"
        :disabled="!hasSelected()"
        :loading="loading"
        >删除</a-button
      >
      <a-button type="primary" icon="redo" @click="getDataList()">刷新</a-button>
    </div>

    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="10">
          <a-col :md="4" :sm="24">
            <a-form-item label="查询类别">
              <a-select allowClear v-model="queryParam.condition">
                <a-select-option key="ServiceNo">服务商编号</a-select-option>
                <a-select-option key="ServiceName">名称</a-select-option>
                <a-select-option key="UnifiedSocialCreditCode">税号</a-select-option>
                <a-select-option key="AgentName">联系人姓名</a-select-option>
                <a-select-option key="AgentIdCardNo">身份证号码</a-select-option>
                <a-select-option key="ElectronicChapter">签章URL</a-select-option>
                <a-select-option key="AgentPhone">电话</a-select-option>
                <a-select-option key="ServiceTelePhone">客服电话</a-select-option>
                <a-select-option key="TaxAgreementContent">税收协定内容</a-select-option>
                <a-select-option key="BankName">银行</a-select-option>
                <a-select-option key="AcctNo">账号</a-select-option>
                <a-select-option key="FileAttId">附件ID</a-select-option>
                <a-select-option key="areaName">地址</a-select-option>
                <a-select-option key="identNo">法人身份证ID</a-select-option>
                <a-select-option key="LegalPersonName">法人姓名</a-select-option>
                <a-select-option key="landlinePhone">法人手机号码</a-select-option>
                <a-select-option key="Alipayagreement_no">支付宝协议号</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="24">
            <a-form-item>
              <a-input v-model="queryParam.keyword" placeholder="关键字" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-button
              type="primary"
              @click="
                () => {
                  this.pagination.current = 1
                  this.getDataList()
                }
              "
              >查询</a-button
            >
            <a-button style="margin-left: 8px" @click="() => (queryParam = {})">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-table
      ref="table"
      :columns="columns"
      :rowKey="(row) => row.Id"
      :dataSource="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :bordered="false"
      size="middle"
    >
      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="handleEdit(record.Id)" v-if="hasPerm('service.Edit')">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm
            title="确定删除吗？"
            v-if="hasPerm('service.Delete')"
            ok-text="确定"
            cancel-text="取消"
            @confirm="handleDelete([record.Id])"
            @cancel="cancel"
          >
            <a href="#">删除</a>
          </a-popconfirm>
          <a-divider type="vertical" />
          <a @click="ServiceBank(record)">开户行配置</a>
          <a-divider type="vertical" />
          <a @click="SignFile(record)">协议配置</a>
        </template>
      </span>
    </a-table>

    <edit-form ref="editForm" :parentObj="this"></edit-form>
    <!-- 开户行配置 -->
    <a-modal title="开户行配置" width="70%" :visible="Bankvisible" :confirmLoading="loading" @cancel="CarviewCancel">
      <a-card title="开户行信息">
        <a-form-model :model="bankentity" v-bind="layout">
          <a-form-model-item label="开户行名称" prop="BankName">
            <a-input v-model="bankentity.BankName" autocomplete="off" />
          </a-form-model-item>
          <a-form-model-item label="银行账号" prop="AcctNo">
            <a-input v-model="bankentity.AcctNo" autocomplete="off" />
          </a-form-model-item>
        </a-form-model>
        <div style="text-align: right">
          <a-button @click="bankAdd" type="primary"> 保存 </a-button>
        </div>
      </a-card>

      <a-table
        ref="table"
        :columns="Bankcolumns"
        :rowKey="(row) => row.Id"
        :dataSource="BankData"
        :loading="loading"
        :bordered="false"
        size="middle"
      >
        <span slot="action" slot-scope="text, record">
          <template>
            <a-popconfirm
              title="确定删除吗？"
              ok-text="确定"
              cancel-text="取消"
              @confirm="BankDelete([record.Id])"
              @cancel="cancel"
            >
              <a href="#">删除</a>
            </a-popconfirm>
          </template>
        </span>
      </a-table>
      <template slot="footer">
        <a-button @click="CarviewCancel">关闭</a-button>
      </template>
    </a-modal>
    <!-- 协议配置 -->
    <a-modal title="协议配置" width="70%" :visible="Signvisible" :confirmLoading="loading" @cancel="SignviewCancel">
      <a-collapse accordion>
        <a-collapse-panel key="1" header="服务商信息">
          <a-form-model :model="Signserentity" v-bind="layout">
            <a-form-model-item label="服务商名称" prop="ServiceName">
              <a-input v-model="Signserentity.ServiceName" autocomplete="off" />
            </a-form-model-item>
            <a-form-model-item label="统一社会信用代码" prop="UnifiedSocialCreditCode">
              <a-input v-model="Signserentity.UnifiedSocialCreditCode" autocomplete="off" />
            </a-form-model-item>
            <a-form-model-item label="单位负责人" prop="LegalPersonName">
              <a-input v-model="Signserentity.LegalPersonName" autocomplete="off" />
            </a-form-model-item>
            <a-form-model-item label="开户行" prop="BankName">
              <a-input v-model="Signserentity.BankName" autocomplete="off" />
            </a-form-model-item>
            <a-form-model-item label="银行账号" prop="AcctNo">
              <a-input v-model="Signserentity.AcctNo" autocomplete="off" />
            </a-form-model-item>
          </a-form-model>
        </a-collapse-panel>
        <a-collapse-panel key="2" header="协议信息">
          <a-upload
            list-type="picture"
            :customRequest="selfUpload1"
            :default-file-list="abc"
            :multiple="false"
            :before-upload="beforeUpload"
          >
            <a-button> <a-icon type="upload" /> 选择协议 </a-button>
          </a-upload>
          <div>
            <a-button @click="submitContrat">保存合同</a-button>
          </div>
          <a-table
            ref="table"
            :columns="Signcolumns"
            :rowKey="(row) => row.Id"
            :dataSource="SignData"
            :loading="loading"
            :bordered="false"
            size="middle"
          >
            <span slot="action" slot-scope="text, record">
              <template>
                <a-popconfirm
                  title="确定删除吗？"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="SignDelete([record.Id])"
                  @cancel="cancel"
                >
                  <a href="#">删除</a>
                </a-popconfirm>
                <a-divider type="vertical" />
                <a @click="downfile(record)">下载协议</a>
              </template>
            </span>
          </a-table>
        </a-collapse-panel>
      </a-collapse>
      <template slot="footer">
        <a-button @click="SignviewCancel">关闭</a-button>
      </template>
    </a-modal>
  </a-card>
</template>

<script>
import EditForm from './EditForm'
import CUploadFile from '@/components/CUploadFile/CUploadFile'
import OperatorCache from '@/utils/cache/OperatorCache'
const columns = [
  //{ title: '服务商编号', dataIndex: 'ServiceNo', width: '10%' },
  { title: '代征主体', dataIndex: 'ServiceName', width: '20%' },
  { title: '统一社会信用代码', dataIndex: 'UnifiedSocialCreditCode', width: '20%' },
  // { title: '税号', dataIndex: 'UnifiedSocialCreditCode', width: '10%' },
  { title: '开户银行', dataIndex: 'BankName', width: '20%' },
  { title: '账户号码', dataIndex: 'AcctNo', width: '20%' },
  { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' } },
]
const Bankcolumns = [
  { title: '开户行', dataIndex: 'BankName', width: '30%' },
  { title: '账号', dataIndex: 'AcctNo', width: '30%' },
  { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' } },
]
const Signcolumns = [
  { title: '文件名称', dataIndex: 'FileName', width: '30%' },
  { title: '上传时间', dataIndex: 'CreateTime', width: '30%' },
  { title: '操作人', dataIndex: 'CreatorId', width: '30%' },
  { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' } },
]
export default {
  components: {
    EditForm,
    CUploadFile,
  },
  mounted() {
    this.getDataList()
  },
  data() {
    return {
      Signcolumns,
      SignData: [],
      abc: [],
      Signserentity: {},
      Signvisible: false, //协议配置
      BankData: [],
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 },
      },
      SID: '',
      bankentity: {},
      Bankcolumns,
      Bankvisible: false,
      data: [],
      pagination: {
        current: 1,
        pageSize: 10,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
      },
      filters: {},
      sorter: { field: 'Id', order: 'asc' },
      loading: false,
      columns,
      queryParam: {},
      selectedRowKeys: [],
    }
  },
  methods: {
    //下载合同
    downfile(row) {
      let index = row.ContractdownUrl.lastIndexOf('Upload')
      let spl = row.ContractdownUrl.substr(index)

      this.$http.post('/Base_Manage/Upload/downSign', { id: spl }, { responseType: 'blob' }).then((res) => {
        const blob = new Blob([res])
        const fileName = row.FileName
        const elink = document.createElement('a') // 创建a标签
        elink.download = fileName // 为a标签添加download属性
        // a.download = fileName; //命名下载名称
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click() // 点击下载
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink) // 释放标签
      })
    },
    //删除合同
    SignDelete(row) {
      this.$http.post('/Base_leasesystem_signfile/leasesystem_signfile/DeleteData', row).then((res) => {
        if (res.Success) {
          this.$message.success('操作成功')
          this.flushSign('Rid', this.Signserentity.FileAttId)
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    //提交合同
    submitContrat() {
      if (this.abc.length <= 0) {
        this.$message.error('请先选择需要上传合同')
      } else if (this.abc.length == 1) {
        let temp = {}
        temp.Rid = this.Signserentity.FileAttId
        temp.FileName = this.abc[0].name
        temp.FilePathUrl = this.abc[0].uid
        temp.UpUserName = OperatorCache.info['UserName']
        temp.UpUserId = OperatorCache.info['Id']
        temp.ContractdownUrl = this.abc[0].url
        this.$http.post('/Base_leasesystem_signfile/leasesystem_signfile/SaveData', temp).then((res) => {
          if (res.Success) {
            this.$message.success('操作成功')
            if (this.Signserentity.FileAttId) {
              this.flushSign('Rid', this.Signserentity.FileAttId)
            }
          } else {
            this.$message.error('操作失败')
          }
        })
        console.log(temp)
      } else {
        this.$message.error('单次上传一个文件，可删除后重新上传')
      }
    },
    beforeUpload(file) {
      let fileType = file.name.split('.')
      const fileDate = fileType.slice(-1)
      if (['xlsx', 'xls', 'doc', 'docx', 'pdf'].indexOf(fileDate[0]) < 0) {
        this.$message.error('仅支持doc,docx,pdf,xls,xlsx 格式')
        return false
      }
    },
    selfUpload1({ action, file, onSuccess, onError, onProgress }) {
      this.loading = true
      const formData = new FormData()
      let that = this
      formData.append('file', file)
      this.$http.post('/Base_Manage/Upload/UploadFileByForm', formData).then((res) => {
        this.abc.push(res)
        onSuccess(res,file)
        this.loading = false
      })
      
    },
    SignviewCancel() {
      this.Signvisible = false
    },
    //刷新签约列表
    flushSign(condition, keyword) {
      let temp = {}
      temp.condition = condition
      temp.keyword = keyword
      this.$http.post('/Base_leasesystem_signfile/leasesystem_signfile/GetDataList', { Search: temp }).then((res) => {
        
        this.SignData = res.Data
      })
    },
    //打开协议弹出层
    SignFile(row) {
      this.SignData = []

      this.abc = []
      this.Signserentity = row
      if (this.Signserentity.FileAttId) {
        this.flushSign('Rid', this.Signserentity.FileAttId)
      }

      this.Signvisible = true
    },
    bankAdd() {
      this.bankentity.SID = this.SID
      this.$http
        .post('/Base_leasesystem_serviceaccount/leasesystem_serviceaccount/SaveData', this.bankentity)
        .then((res) => {
          this.GetBank(this.SID)
        })
    },
    CarviewCancel() {
      this.Bankvisible = false
    },
    ServiceBank(row) {
      this.GetBank(row.Id)
      this.SID = row.Id
      this.Bankvisible = true
    },
    GetBank(row) {
      this.$http.post('/Base_Manage/Home/GetBankBySID', { id: row }).then((res) => {
        this.BankData = res.Data
      })
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }
      this.sorter = { ...sorter }
      this.getDataList()
    },
    getDataList() {
      this.selectedRowKeys = []

      this.loading = true
      this.$http
        .post('/Base_leasesystem_service/leasesystem_service/GetDataList', {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          SortField: this.sorter.field || 'Id',
          SortType: this.sorter.order,
          Search: this.queryParam,
          ...this.filters,
        })
        .then((resJson) => {
          this.loading = false
          this.data = resJson.Data
          const pagination = { ...this.pagination }
          pagination.total = resJson.Total
          this.pagination = pagination
        })
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
    hanldleAdd() {
      this.$refs.editForm.openForm()
    },
    handleEdit(id) {
      this.$refs.editForm.openForm(id)
    },
    handleDelete(ids) {
      var thisObj = this
      return new Promise((resolve, reject) => {
        thisObj.$http.post('/Base_leasesystem_service/leasesystem_service/DeleteData', ids).then((resJson) => {
          resolve()

          if (resJson.Success) {
            thisObj.$message.success('操作成功!')

            thisObj.getDataList()
          } else {
            thisObj.$message.error(resJson.Msg)
          }
        })
      })
    },
    cancel(e) {
      this.$message.error('已取消删除')
    },
    BankDelete(ids) {
      this.$http.post('/Base_leasesystem_serviceaccount/leasesystem_serviceaccount/DeleteData', ids).then((res) => {
        if (res.Success) {
          this.$message.success('操作成功')
          this.GetBank(this.SID)
        } else {
          this.$message.error('操作失败')
        }
      })
    },
  },
}
</script>

<style>
.ant-table-thead > tr > th
{
  font-weight: 600;
  color: #333333;
}
</style>